<template>
    <div class="tab">
      <ul>
        <li>
          <router-link to="/home/zyd">总运动</router-link>
        </li>
        <li>
          <router-link to="/home/jz">健走</router-link>
        </li>
        <li>
          <router-link to="/home/pb">跑步</router-link>
        </li>
        <li>
          <router-link to="/home/qx">骑行</router-link>
        </li>
        <li>
          <router-link to="/home/search"><i class="iconfont">&#xe613;</i></router-link>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "TabBar"
    }
</script>

<style scoped lang="less">
  .tab{
    ul{
      display: flex;
      height: 50px;
      background-color: #181818;
      li{
        flex-grow: 1;
        line-height: 50px;
        a{
          display: block;
          width: 100%;
          height: 100%;
          color: #FFFFFF;
          font-size: 14px;
          letter-spacing: 2px;
        }
      }
    }
  }
  .router-link-active {
    border-bottom: 3px solid #FEDA05;
  }
</style>
